<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>评论审核</title>

    <!-- Bootstrap -->
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <style>
        #app{
            padding: 10px ;
        }
        .list{
            list-style: none;
            padding: 0;
        }
        .list li{
            margin: 10px 0;
        }
        .nic_pic{
            display: inline-block;
            width: 40px;
            height: 40px; 
            background-size: cover;
            vertical-align: middle;
            border-radius: 50px;
            margin-right: 10px;
        }
        .content_time{
            float: right;
            display: inline-block;
            line-height: 36px;
            font-size: 12px;
            color: #999999;
        }
        .content_header{
            margin-bottom: 20px;
        }
        .content_pic{
            width: 80px;
            height: 80px;
            background-size: cover;
            display: inline-block;
            margin-right: 1em;
            border: 1px solid #e6e6e6;
            cursor: pointer;
        }
        input[type=radio]{
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            position: relative;
            display: inline-block;
            vertical-align: top;
            width: 20px;
            height: 20px;
            border: 1px solid #1890FF;
            outline: none;
            cursor: pointer;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
        }

        input[type=radio]:after{
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            display: block;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background: #1890FF;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
            -webkit-transition : all ease-in-out 300ms;
            -moz-transition : all ease-in-out 300ms;
            transition : all ease-in-out 300ms;
        }
        input[type=radio]:checked:after{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
        input,button,select,textarea{outline:none !important;}
        .alert p,.alert_bottom_body{
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <section id="app">
        <div class="row">
            <div class="col-md-12">
                <ol class="breadcrumb">
                    <li><a href="javascript:">内容管理</a></li>
                    <li><a href="javascript:">评论审核</a></li>
                </ol>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <ul class="list">
                    <li class="list_body hide">
                        <div style="width: 80%;padding:20px 30px;
            border: 1px solid #cecbcb;display: inline-block;vertical-align: middle;">
                            <div class="content_header">
                                <i class="nic_pic"></i>
                                <span class="nic_name"> </span>
                                <span class="content_time">评论时间：</span>
                            </div>
                            <div class="content_body">
                                <p class="content_text"> </p>
                                
                                <div class="content_pic hide" data=" " style="background-size: cover;"></div>
                            </div>
                        </div>
                        <div style="width: 16%;margin-left: 2%;display: inline-block;line-height: 30px;vertical-align: middle;">
                            <div style="margin-bottom: 60px;">
                                <input class="hide" type="radio" value="1" checked> 通过
                            </div>
                            <div>
                                <input class="hide" type="radio" value="2"> 不通过
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div style="position:relative;margin-top: 40px;">
            <div style="margin: 20px auto;width: 20%;">
                <button type="button"  id="button_id" onclick="submit();" class="btn btn-info btn-lg" style="padding: 10px 80px;">提交</button>
            </div>
        </div>
    </section>
    <div id="popEp" style="z-index: 9;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);display: none;position: absolute;top: 0;" onclick="javascript:$('#popEp').css('display','none');" >
        <div style="background-color: #ffffff;width: 30%;min-height: 100px;position: relative;top: 10%;margin: 0 auto;border-radius: 5px;padding: 1%;color:rgb(51,51,51);  ">
            <p style="text-align: center;"><b>提醒</b></p>
            <p style="margin-top: 1.3em;"  class="text-center">提交中，请稍后...</p>
        </div>
    </div>
    <div id="alert_pic" style="z-index: 9;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);display: none;position: fixed;top: 0;" onclick="javascript:$('#alert_pic').css('display','none');">
        <div style="background-color: #ffffff;width: 45%;min-height: 100px;position: relative;top: 10%;margin: 0 auto;border-radius: 5px;padding: 1%;color:rgb(51,51,51);">
            <img src="http://imgtu.5011.net/uploads/content/20170213/3890561486958361.jpg" alt="" width="100%">
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () { 
      var clone_obj = $('.list_body').clone().removeClass('hide');
        getContents = function (page, size) {
            $.ajax({
                url: '/examine/comment/list',
                method: 'GET',
                data: {
                    pageSize: size,
                    pageNumber: page,
                    sortOrder: 'desc'
                },
                dataType: "json",
                beforeSend: function () {
                    $("#popEp b").text('提示');
                    $("#popEp .text-center").text('正在拉取中，请稍后....');
                    $("#popEp").fadeIn();
                },
                success: function (data) {
                    if (data.content.length != 0){
                        $("#button_id").attr('disabled',false);
                        for (var i = 0;i < data.content.length;i++){
                            var tmp = clone_obj.clone();
                            tmp.find('.nic_name').text(data.content[i].nickName);
                            tmp.find('.content_time').text('评论时间：' + data.content[i].uploadDate);
                            if(data.content[i].headPortraitUrl !=null&&data.content[i].headPortraitUrl != '' && data.content[i].headPortraitUrl!= undefined){
                               tmp.find('.nic_pic').css({'background':'url('+ data.content[i].headPortraitUrl +') center center no-repeat','background-size':'cover'});
                            }else{
                               tmp.find('.nic_pic').css({'background':'url(${ctx!}/assets/img/user_pic.png) center center no-repeat','background-size':'cover'});
                            } 
                            tmp.find('.content_text').text(data.content[i].commentContent);

                            if (data.content[i].mediaJson != undefined && data.content[i].mediaJson != ''){
                                var media_arr = JSON.parse(data.content[i].mediaJson);
                                var pic_dom = tmp.find('.content_pic').clone().removeClass('hide');
                                for (var j = 0;j < media_arr.length;j++){
                                    var media_dom = pic_dom.clone();   
                                    media_dom.attr('data',media_arr[j].url).css({'background':'url(' + media_arr[j].url + ') center center no-repeat','background-size':'cover'});
                                    tmp.find('.content_body').append(media_dom);
                                }
                            }

                            tmp.find('input[type="radio"]').removeClass('hide').attr('name',data.content[i].id);
                            $('.list').append(tmp);
                        }
                        $("#popEp").hide();
                    }else{
                        $('.list_body').empty();
                        $("#button_id").attr('disabled',true); 
                        $("#popEp b").text('');
                        $("#popEp .text-center").text('暂无评论审核，正在分配');
                        $("#popEp").fadeIn();
                    }
                },
                error: function (xhr, type) {
                    if (xhr.status == 0) {
                        $("#popEp .text-center").text('请检查网络状态');
                    } else {
                        $("#popEp .text-center").text('系统繁忙, 稍候再试');
                    }
                    setTimeout(function () { $('#popEp').fadeOut(100); }, 500);
                    return false;
                }
            })
        }
        $(document).on('click','.content_pic',function () {
            var pic_url = $(this).attr('data');
            $('#alert_pic').find('img').attr('src',pic_url);
            $('#alert_pic').fadeIn();
        })

        submit = function () {
            // $("#popEp").fadeIn();
            var payload = [];
            var checkArr = $('input:checked');
            for (var i = 0;i<checkArr.length;i++) {
                var obj = {
                    id : checkArr[i].name,
                    exResult : checkArr[i].value
                }
                if (obj.id != undefined && obj.id != null && obj.id != ''){
                    payload.push(obj);
                }
            }
            if(payload.length!=0){
             $("#button_id").attr('disabled',true);
	            $.ajax({
	                url: '/examine/comment/update',
	                headers: { 'Content-type': 'application/json;charset=UTF-8' },
	                method: 'POST',
	                data:  JSON.stringify(payload),
	                dataType: "json",
	                beforeSend: function () {
	                    $("#popEp .text-center").text('提交中，请稍后...');
	                    $("#popEp").fadeIn();
	                },
	                success: function (data) {
	                    $('.list_body').remove()
	                    $("#popEp .text-center").text('提交成功!,页面跳转中...');
	                    setTimeout(function () { getContents(1, 10);}, 500);
	                    return true;
	                },
	                error: function (xhr, type) {
	                    if (xhr.status == 0) {
	                        $("#popEp .text-center").text('请检查网络状态');
	                    } else {
	                        $("#popEp .text-center").text('系统繁忙, 稍候再试');
	                    }
	                    setTimeout(function () { $('#popEp').fadeOut(100); }, 500);
	                    return false;
	                }
	            })
            }
        }
        getContents(1, 10);
    })

</script>
</html>